<template>
  <div class="stationInfo-page">
    <a-tabs v-model:activeKey="state.tabActive" tab-position="left">
      <a-tab-pane key="1" tab="基本信息">
        <div class="station_info">
          <div class="left_info">
            <table class="tableInfo">
              <tbody>
                <tr>
                  <td class="fieldname">测站名</td>
                  <td><span>{{ state.infoData?.stnm || ''}}</span></td>
                  <td class="fieldname">站码</td>
                  <td><span>{{ state.infoData?.stcd || ''}}</span></td>
                </tr>
                <tr>
                  <td class="fieldname">联系人</td>
                  <td><span>{{ state.infoData?.contacts || ''}}</span></td>
                  <td class="fieldname">联系电话</td>
                  <td><span>{{ state.infoData?.contactsPhone || ''}}</span></td>
                </tr>
                <tr>
                  <td class="fieldname">经度</td>
                  <td><span>{{ state.infoData?.lgtd || ''}}</span></td>
                  <td class="fieldname">纬度</td>
                  <td><span>{{ state.infoData?.lttd || ''}}</span></td>
                </tr>
                <tr>
                  <td class="fieldname">联系人职务</td>
                  <td><span>{{ state.infoData?.contactsPosition || ''}}</span></td>
                  <td class="fieldname">设备卡号</td>
                  <td><span>{{ state.infoData?.eqNo || ''}}</span></td>
                </tr>
                <tr>
                  <td class="fieldname">镇</td>
                  <td ><span>{{ state.infoData?.town || ''}}</span></td>
                  <td class="fieldname">设备编码</td>
                  <td><span>{{ state.infoData?.eqId || ''}}</span></td>
                </tr>
                <tr>
                 <td class="fieldname">设备状态</td>
                  <td colspan="3">
                    <span  >{{ state.infoData?.eqStatus || ''}}</span>
                  </td>
                </tr>
                <tr>
                  <td class="fieldname">数据最后接收时间</td>
                  <td colspan="3">
                    <span  >{{ state.infoData?.tm || ''}}</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="right_map">
            <GlobalOlMap />
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from "vue";
import { getOneByStcdData } from '@/api/information/rain';
import { GlobalOlMap } from "@/components/GlobalOlMap";
import { addMapData } from "./addMapData";

defineOptions({ name: "StationInfo" });

const state = reactive({
  tabActive: "1",
  infoData: null,
  chartOption: null,
});

const props = defineProps({
  data: { type: Object },
  processTable: { type: Array },
});

const getStationDataInfo = async () => {
  const infoData = await getOneByStcdData(props.data.stcd);
  console.log(infoData, 'infoData');
  state.infoData = infoData;
  addMapData(infoData);
};

onMounted(async () => {
  await getStationDataInfo();
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.stationInfo-page {
  width: 100%;
  height: 100%;
  min-height: 590px;
  .station_info {
    height: 100%;
    display: flex;
    justify-content: space-between;
    .left_info {
      width: 50%;
      .tableInfo {
        width: 100%;
        tr td {
          border: 1px solid #eee;
          padding: 8px 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        tr td:nth-child(1),
        tr td:nth-child(3) {
          width: 15%;
          // min-width: 120px;
          background: #fafafa;
          color: #333;
        }
        tr td:nth-child(2),
        tr td:nth-child(4) {
          width: 35%;
          // min-width: 200px;
          color: #111;
        }
      }
    }
    .right_map {
      width: 49%;
      height: 100%;
    }
  }
  .content {
    width: 100%;
    height: 80%;
  }
}
</style>
